import React, { useEffect, useState } from 'react';
import '@/views/Index/Recommend/Recommend.scss'
import Nav from '../../../components/Nav/Nav'
import service from '../../../api/index'

import type { ColumnsType } from 'antd/es/table';

import { Table, Button, message, Switch } from 'antd';
import { HeartFilled, HeartOutlined } from '@ant-design/icons';


interface Props {

}

interface DataType {
    img1: string;
    proname: string;
    brand: string;
    category: string;
    originprice: number;
    discount: number;
    sales: number;
    issale: number;
    isseckill: number;
    isrecommend: number;
    proid: string;
}

interface Cate {
    value: string;
    text: string;
}

function Recommend(props: Props) {

    // 分类列表
    let [categorylist, setCategoryList] = useState<Cate[]>([])

    // flag判断商品的状态，true为选中，false为未选中
    let [flag, setFlag] = useState(true)

    // 产品总数量
    let [total, setTotal] = useState()

    // 表格数据源
    let [dataSource, setDateSource] = useState<DataType[]>([])

    // 表格头部
    const columns: ColumnsType<DataType> = [
        {
            title: '序号', //表格列的标题
            // dataIndex: 'order', //数据索引( 属性名 )
            // key: 'order',
            width: '6%',
            align: 'center',
            render: (_, record) => <a>{dataSource.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {
            title: '图片',
            dataIndex: 'img1',
            key: 'img1',
            width: '8%',
            align: 'center',
            render: (_, record) => <img src={record.img1} style={{ maxWidth: '60%' }} />,
        },
        {
            title: '名称',
            dataIndex: 'proname',
            key: 'proname',
            width: '14%',
            ellipsis: true,
            align: 'center',
        },
        {
            title: '品牌',
            dataIndex: 'brand',
            key: 'brand',
            // width: '20%',
            align: 'center',
        },
        {
            title: '分类',
            dataIndex: 'category',
            key: 'category',
            // width: '20%',
            align: 'center',
            filters: categorylist,
            onFilter: (value: any, record) => lookup(record.category, value),
        },
        {
            title: '原价',
            dataIndex: 'originprice',
            key: 'originprice',
            // width: '20%',
            align: 'center',
            sorter: {
                compare: (a, b) => a.originprice - b.originprice,
                multiple: 3,
            },
        },
        {
            title: '折扣',
            dataIndex: 'discount',
            key: 'discount',
            // width: '20%',
            align: 'center',
            sorter: {
                compare: (a, b) => a.discount - b.discount,
                multiple: 3,
            },
        },
        {
            title: '销量',
            dataIndex: 'sales',
            key: 'sales',
            // width: '20%',
            align: 'center',
            sorter: {
                compare: (a, b) => a.sales - b.sales,
                multiple: 3,
            },
        },


        {
            title: '是否推荐',
            dataIndex: 'isrecommend',
            key: 'isrecommend',
            // width: '20%',
            align: 'center',
            render: (_, record) => {
                return <>
                    {
                        record.isrecommend == 1 ?
                            <Switch defaultChecked={true} onChange={() => { recommendChange(record.proid, record.isrecommend) }} />
                            :
                            <Switch defaultChecked={false} onChange={() => { recommendChange(record.proid, record.isrecommend) }} />
                    }

                </>
            }
        },
        {
            title: '操作',
            // dataIndex: 'make', 
            // key: 'make',
            width: '10%',
            align: 'center',
            render: (_, record) => <Button className='remove' type="primary" danger onClick={() => { proDelete(record.proid) }} >Delete</Button>,
        },
    ];

    // 发请求
    useEffect(() => {
        recommendlist({ type: 'isrecommend', flag: 1 })
        // 获取分类列表
        catalist()
    }, [])

    // 发送推荐列表请求
    let recommendlist = async (payload = {}) => {
        let res = await service.pro.pro_showdata(payload)
        console.log(res.data);
        if (res.data.code == '200') {
            // 给数据添加key属性
            res.data.data.map((item: any) => {
                item.key = item.proid
            })
            setDateSource(res.data.data)
            setTotal(res.data.data.length)
        }

    }

    // 发送分类列表请求
    let catalist = async (payload = {}) => {
        let res = await service.pro.pro_category(payload)
        // console.log(res.data);
        if (res.data.code == '200') {
            let result = res.data.data.map((item: any) => {
                return (
                    { text: item, value: item }
                )
            })
            setCategoryList(result)
        }
    }

    let code = (res: any) => {
        if (res.data.code == '200') {
            message.success({
                content: res.data.message,
                style: {
                    marginTop: '20vh',
                },
            })
            if (flag) {
                recommendlist({ type: 'isrecommend', flag: 1 })
            } else {
                recommendlist({ type: 'isrecommend', flag: 0 })
            }

        } else {
            message.error({
                content: res.data.message,
                style: {
                    marginTop: '20vh',
                },
            })
        }
    }


    // 改变是否推荐开关状态
    let recommendChange = async (proid: any, flag: any) => {
        if (flag) {
            let res = await service.pro.pro_update({ proid, type: 'isrecommend', flag: 0 })
            // console.log(res.data);
            code(res)
        } else {
            let res = await service.pro.pro_update({ proid, type: 'isrecommend', flag: 1 })
            // console.log(res.data);
            code(res)
        }
    }

    let proDelete = async (proid: any) => { }

    // 分页设置
    let pageChange = (page: any, pageSize: any) => {
        // console.log(page, pageSize);
        if (flag) {
            recommendlist({ count: page, limitNum: pageSize, type: 'isrecommend', flag: 1 })
        } else {
            recommendlist({ count: page, limitNum: pageSize, type: 'isrecommend', flag: 0 })
        }

    };

    // 选中的商品列表
    let selector = () => {
        setFlag(true)
        recommendlist({ type: 'isrecommend', flag: 1 })
    }
    // 未选中的商品列表
    let unselector = () => {
        setFlag(false)
        recommendlist({ type: 'isrecommend', flag: 0 })
    }
    // 根据分类筛选商品
    let lookup = (arr: any, value: any) => {
        let arrs = arr.includes(value)
        setTotal(arrs.length)
        return arrs
    }

    return (
        <div className='recommend'>
            <Nav />
            <div className="list">
                <div className="btn">
                    <Button className='selector btn_item' type="primary" onClick={selector}>
                        selector<HeartFilled />
                    </Button>
                    <Button className='unselector btn_item' type="primary" onClick={unselector}>
                        unselector<HeartOutlined />
                    </Button>
                </div>
                <Table className='table' dataSource={dataSource} columns={columns} scroll={{ y: 370 }} pagination={{
                    showSizeChanger: false,
                    onChange: pageChange,
                    defaultCurrent: 1,
                    total: total
                }} />
            </div>
        </div>
    );
}

export default Recommend;